<script setup lang="ts">
defineOptions({
  name: 'HeaderBack',
})
const route = useRoute()
const router = useRouter()

const title = computed(() => $t(`${route.meta?.title || ''}`))
const path = computed(() => route.meta?.path || '')

function onBack() {
  if (path.value) {
    i18nNavigateTo(path.value)
    return
  }
  router.back()
}
</script>

<template>
  <div class="h-12 relative w-full items-center bg-[#323738] text-center">
    <BaseButton type="none" class="absolute center left-4 top-1/2 transform -translate-y-1/2 bg-[#4A5354] size-7" @click="onBack">
      <BaseIcon name="uni-arrow-down" class="rotate-90 mr-.5" />
    </BaseButton>
    <div class="leading-12 font-extrabold text-sm">
      {{ title }}
    </div>
  </div>

  <slot />
</template>

<style scoped lang="scss"></style>
